<template>
  <div class="video-player">
    <div class="container">
      <div class="header">
        <router-link to="/" class="back-btn">← 返回配置</router-link>
        <h2>视频播放器</h2>
      </div>
      
      <div class="video-container">
        <video
          ref="videoRef"
          controls
          autoplay
          muted
          class="video-element"
        >
          您的浏览器不支持视频播放
        </video>
        
        <div v-if="!canPlay && !error" class="loading-overlay">
          <div class="loading-spinner"></div>
          <p>正在加载视频流...</p>
        </div>
        
        <div v-if="error" class="error-overlay">
          <h3>播放错误</h3>
          <p>{{ error }}</p>
          <button @click="retryPlayback" class="btn btn-primary">重试</button>
        </div>
      </div>
      
      <div class="controls">
        <div class="control-group">
          <label>播放控制:</label>
          <div class="button-group">
            <button @click="playVideo" :disabled="!canPlay" class="btn btn-success">播放</button>
            <button @click="pauseVideo" :disabled="!canPlay" class="btn btn-warning">暂停</button>
            <button @click="reloadVideo" class="btn btn-info">重新加载</button>
          </div>
        </div>
      </div>
      
      <div class="status-card">
        <h3>播放状态</h3>
        <div class="status-grid">
          <div class="status-item">
            <span class="label">HLS状态:</span>
            <span :class="['value', hlsStatus]">{{ getHLSStatusText(hlsStatus) }}</span>
          </div>
          <div class="status-item">
            <span class="label">缓冲状态:</span>
            <span class="value">{{ buffering ? '缓冲中' : '就绪' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Hls from 'hls.js'
import { useVideoStore } from '../stores/video'

const videoStore = useVideoStore()
const videoRef = ref(null)
const hls = ref(null)

const canPlay = ref(false)
const error = ref(null)
const buffering = ref(false)
const hlsStatus = ref('stopped')

const getHLSStatusText = (status) => {
  const statusMap = {
    stopped: '已停止',
    loading: '加载中',
    ready: '就绪',
    error: '错误'
  }
  return statusMap[status] || status
}

const initHLS = () => {
  if (!videoRef.value) return
  
  if (hls.value) {
    hls.value.destroy()
  }
  
  if (Hls.isSupported()) {
    hls.value = new Hls({
      debug: false,
      enableWorker: true,
      lowLatencyMode: true
    })
    
    hls.value.loadSource('/hls/stream.m3u8')
    hls.value.attachMedia(videoRef.value)
    
    hls.value.on(Hls.Events.MANIFEST_PARSED, () => {
      hlsStatus.value = 'ready'
      canPlay.value = true
      videoRef.value.play().catch(e => console.log('Auto-play prevented:', e))
    })
    
    hls.value.on(Hls.Events.ERROR, (event, data) => {
      hlsStatus.value = 'error'
      error.value = `HLS错误: ${data.details}`
    })
    
    hlsStatus.value = 'loading'
  } else if (videoRef.value.canPlayType('application/vnd.apple.mpegurl')) {
    videoRef.value.src = '/hls/stream.m3u8'
    canPlay.value = true
    hlsStatus.value = 'ready'
  } else {
    error.value = '您的浏览器不支持HLS播放'
  }
}

const playVideo = () => {
  if (videoRef.value && canPlay.value) {
    videoRef.value.play()
  }
}

const pauseVideo = () => {
  if (videoRef.value && canPlay.value) {
    videoRef.value.pause()
  }
}

const reloadVideo = () => {
  error.value = null
  initHLS()
}

const retryPlayback = () => {
  error.value = null
  initHLS()
}

onMounted(() => {
  videoStore.fetchStatus()
  
  if (videoStore.isRunning) {
    initHLS()
  } else {
    error.value = '视频流未启动，请先启动RTSP流'
  }
})

onUnmounted(() => {
  if (hls.value) {
    hls.value.destroy()
  }
})
</script>

<style scoped>
.video-player {
  width: 100%;
}

.container {
  display: grid;
  gap: 2rem;
}

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.back-btn {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.back-btn:hover {
  background-color: #f8f9fa;
}

.header h2 {
  margin: 0;
  color: #333;
}

.video-container {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.loading-overlay,
.error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-overlay h3 {
  margin: 0 0 1rem 0;
  color: #ff6b6b;
}

.error-overlay p {
  margin: 0 0 1.5rem 0;
  opacity: 0.9;
}

.controls {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.control-group {
  margin-bottom: 1.5rem;
}

.control-group label {
  display: block;
  font-weight: 500;
  color: #555;
  margin-bottom: 0.75rem;
}

.button-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.status-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.status-card h3 {
  margin: 0 0 1rem 0;
  color: #333;
}

.status-grid {
  display: grid;
  gap: 0.75rem;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f3f4;
}

.status-item:last-child {
  border-bottom: none;
}

.label {
  font-weight: 500;
  color: #555;
}

.value {
  font-weight: 500;
}

.value.loading {
  color: #ffc107;
}

.value.ready {
  color: #28a745;
}

.value.error {
  color: #dc3545;
}

.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #218838;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-warning:hover:not(:disabled) {
  background: #e0a800;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-info:hover:not(:disabled) {
  background: #138496;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #5a6fd8;
}
</style>
